<template>
  <a-modal
    title="转移所属招商"
    v-model:visible="showModal"
    fullscreen
    :align-center="false"
    :render-to-body="false"
    :modal-style="{ height: '300px', width: '600px', top: '30vh' }"
  >
    <template #footer>
      <a-button @click="showModal = false">取消</a-button>
      <a-button type="primary" @click="submitHandle">确定</a-button>
    </template>
    <a-form
      ref="formRef"
      :label-col-props="{ span: 6 }"
      :wrapper-col-props="{ span: 18 }"
      :model="formData"
      label-placement="left"
      label-align="left"
    >
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <a-form-item label="小时达运营部门" field="dyOperateDept" :rules="rules.dyOperateDept">
            <a-select
              allow-clear
              v-model="formData.dyOperateDept"
              @change="loadDyOperatorOptions"
              placeholder="小时达运营部门"
            >
              <a-option
                v-for="item in deptMap['运营部'].children"
                :key="item.deptId"
                :value="item.deptId"
                :label="item.deptName"
              />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <a-form-item label="小时达运营人员" field="dyOperator" :rules="rules.dyOperator">
            <a-select allow-clear v-model="formData.dyOperator" placeholder="小时达运营人员">
              <a-option
                v-for="item in dyOperatorOptions"
                :key="item.userId"
                :value="item.userId"
                :label="item.nickname"
              />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <a-form-item label="美团运营部门" field="mtOperateDept" :rules="rules.mtOperateDept">
            <a-select
              allow-clear
              v-model="formData.mtOperateDept"
              @change="loadMtOperatorOptions"
              placeholder="美团运营部门"
            >
              <a-option
                v-for="item in deptMap['运营部'].children"
                :key="item.deptId"
                :value="item.deptId"
                :label="item.deptName"
              />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <a-form-item label="美团运营人员" field="mtOperator" :rules="rules.mtOperator">
            <a-select allow-clear v-model="formData.mtOperator" placeholder="美团运营人员">
              <a-option
                v-for="item in mtOperatorOptions"
                :key="item.userId"
                :value="item.userId"
                :label="item.nickname"
              />
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useDept } from '@/hooks/system/useDept';
  import { getUserList } from '@/api/system/user';
  import { Message } from '@arco-design/web-vue';
  import { batchMerchat } from '@/api/business/record-management';
  const { deptMap } = useDept({ deptNames: ['运营部'] });
  const showModal = ref(false);
  const rowKeys = ref<string[]>([]);
  const dyOperatorOptions = ref<any[]>([]);
  const mtOperatorOptions = ref<any[]>([]);
  const formRef = ref();
  const emit = defineEmits(['submit']);
  function loadDyOperatorOptions(deptId: string) {
    dyOperatorOptions.value = [];
    if (!deptId) return;
    getUserList({ deptId, pageSize: 99999, page: 1 }).then((res) => {
      dyOperatorOptions.value = res.list;
    });
  }
  function loadMtOperatorOptions(deptId: string) {
    mtOperatorOptions.value = [];
    if (!deptId) return;
    getUserList({ deptId, pageSize: 99999, page: 1 }).then((res) => {
      mtOperatorOptions.value = res.list;
    });
  }
  function defaultFormData() {
    return { dyOperateDept: '', dyOperator: '' };
  }
  const formData = ref<Recordable>(defaultFormData());
  const rules = {
    dyOperateDept: [
      {
        required: true,
        message: '请输入小时达运营部门',
        trigger: ['blur', 'change'],
      },
    ],
    dyOperator: [
      {
        required: true,
        message: '请输入小时达运营人员',
        trigger: ['blur', 'change'],
      },
    ],
    mtOperateDept: [
      {
        required: true,
        message: '请输入美团运营部门',
        trigger: ['blur', 'change'],
      },
    ],
    mtOperator: [
      {
        required: true,
        message: '请输入美团运营人员',
        trigger: ['blur', 'change'],
      },
    ],
  };

  async function submitHandle() {
    try {
      const validErr = await formRef.value.validate();
      if (validErr) {
        const errorData = Object.values(validErr)[0] as Recordable;
        return Message.error(errorData!.message);
      }
      const params = {
        batchType: 2,
        dyOperator: formData.value.dyOperator,
        dyOperateDept: formData.value.dyOperateDept,
        ids: rowKeys.value,
      };
      await batchMerchat(params);
      Message.success('操作成功');
      emit('submit');
      showModal.value = false;
    } catch (error) {
      console.log(error);
    }
  }

  function openModal(keys: string[]) {
    rowKeys.value = keys;
    showModal.value = true;
  }

  defineExpose({ openModal });
</script>

<style lang="less" scoped></style>
